<template>
  <div>
    <el-form
      :model="baseInfoForm"
      :rules="baseInfoFormRules"
      ref="baseInfoFormRef"
      label-width="110px"
      label-position="left"
    >
      <el-form-item label="问卷编号" prop="code">
        <el-input
          v-model="baseInfoForm.code"
          placeholder="请输入问卷编码（注：编码由4~8位大写字母组成）"
          maxlength="6"
        ></el-input>
      </el-form-item>
      <el-form-item label="问卷名称" prop="name">
        <el-input
          v-model="baseInfoForm.name"
          placeholder="请输入问卷名称"
          maxlength="30"
        ></el-input>
      </el-form-item>
      <el-form-item label="问卷描述" prop="describe">
        <el-input
          type="textarea"
          v-model="baseInfoForm.describe"
          placeholder="请输入问卷描述"
          show-word-limit
          maxlength="100"
        ></el-input>
      </el-form-item>
      <el-form-item label="页脚第一行文字" prop="footer_one">
        <el-input
          v-model="baseInfoForm.footer_one"
          placeholder="请输入"
          maxlength="50"
        ></el-input>
      </el-form-item>
      <el-form-item label="页脚第二行文字" prop="footer_two">
        <el-input
          v-model="baseInfoForm.footer_two"
          placeholder="请输入"
          maxlength="50"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    questionnaireBaseInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      baseInfoForm: {
        id: '',
        code: '',
        name: '',
        describe: '',
        footer_one: '',
        footer_two: ''
      },
      baseInfoFormRules: {
        code: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            pattern: /^[A-Z]{4,8}/,
            message: '必须为4~8位大写字母',
            trigger: 'blur'
          }
        ],
        name: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  created() {},
  methods: {
    validateForm() {
      let flag = null
      this.$refs.baseInfoFormRef.validate(async (valid) => {
        if (valid) {
          flag = true
          this.$emit('showQuestionnaireBaseInfo', this.baseInfoForm)
        } else {
          flag = false
        }
      })
      return flag
    }
  },
  watch: {
    questionnaireBaseInfo() {
      this.baseInfoForm = JSON.parse(JSON.stringify(this.questionnaireBaseInfo))
      console.log(this.baseInfoForm)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
